<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--删除默认的苹果工具栏和菜单栏-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--控制状态栏显示样式-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>爪游宝</title>
    <link href="https://osscdn.zhuayoubao.com/zyb/zyb_icon.png" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" href="./kdysj/css/kdysj.css">
    <link rel="stylesheet" href="./kdysj/css/index.css">
    <!-- 引入 jquery-toast-plugin 的 CSS 文件 -->
<script src="https://osscdn.zhuayoubao.com/zyb/ios/ios_landing/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://osscdn.zhuayoubao.com/zyb/ios/ios_landing/jquery.toast.min.css">
<!-- 引入 jquery-toast-plugin 的 JavaScript 文件 -->
<script src="https://osscdn.zhuayoubao.com/zyb/ios/ios_landing/jquery.toast.min.js"></script>
<style>
    /* 自定义样式，使提示框背景为灰色透明 */
        .jq-toast-single {
            background: rgba(32,32,32,0.9)!important;
            border-radius: 10px !important;
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            color: white !important;
    }
    /* 隐藏绿色进度条 */
    .jq-toast-loader {
            display: none !important;
        }
</style>
</head>

<body class="kdysj-wrapper" onclick="clickEvent()">
    <div class="all" id="all" style="max-width: 800px;">
        <!-- <div class="fixed" >
            <div class="left">
                <div class="icon1 lazy"></div>
                <div class="text">
                    <p class="p1">口袋异世界</p>
                    <p class="p2">体验独特异域冒险</p>
                </div>
            </div>
            <div class="icon2 download lazy"></div>
        </div> -->
        <div class="content">
            <div class="div div1 lazy">
                <!-- <img width="100%" src="https://osscdn.zhuayoubao.com/zyb/default/zyb_landing.png"></img> -->
                <div class="reg-form">
                    <div class="form-content">
                        <div class="phone-input">
                            <div class="label">手机号：</div>
                            <div class="input-warp"><input id="phoneInput" value="" placeholder="请输入您的手机号码" ></input> </div>
                        </div>
                        <div class="sms-input">
                            <div class="label"  >验证码：</div>
                            <div class="input-warp">
                                <input id="smsCode"  placeholder="请输入您的验证码" value="" ></input>
                            </div>
                            <div class="btn-send">
                                <div id="sendCodeBtn">获取验证码</div>
                            </div>
                        </div>
                        <div class="protocol">注册即表示同意爪游宝
                            <a target="_blank" href="https://h5.zhuayoubao.com/login/agreement">《注册协议》</a>和
                            <a target="_blank" href="https://h5.zhuayoubao.com/login/protocol">《隐私协议》</a></div>
                        <div class="down-content" onclick="submit()">
                        </div>
                    </div>
                </div>
            </div>
                </div>
            </div>  
        </div>
    </div>
</body>


<script>
    let rem;
    let isWeixin = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
    var showShade = false;
    var host="https://app.zhuayoubao.com"
    function isSafariByUserAgent() {
    const userAgent = navigator.userAgent.toLowerCase();
        return (
            userAgent.indexOf('safari')!== -1 &&
            userAgent.indexOf('chrome') === -1 &&
            userAgent.indexOf('android') === -1
        );
    }
//var host="http://localhost:8002"
    window.onload = function () {
        setRem();
        init();
        sendSmsCode();
    }

    function setRem() {
        var whdef = 100 / 195  //  表示1920的设计图,使用100PX的默认值
        var bodyWidth = document.getElementById('all').getBoundingClientRect().width;// 当前窗口的宽度
        rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
        document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
    }


    function init() {
        $("div.wrapper").each(function (i, e) {
            $(e).attr("ondragstart", "return false");
        });

        var $demo1 = $("div.demo1")
        // var carousel1 = new Carousel($demo1.children("ul.container"), {
        //     opacity: 1,
        //     scale: [.8],
        //     transition: "400ms",
        //     switchBtn: $demo1.children("i.btn-direct"),
        //     isClickCard: true,
        //     isAuto: true,
        //     interval: 2000,
        //     offsetDistance: 0.8*rem, //间距偏移值，默认为：ul父容器宽度/（卡片数量-1）
        // });
        console.info($demo1.children("i.btn-direct"))
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop === 0) {
                $(".bottom-fixed-card-wrap").addClass("first-screen")
            } else {
                $(".bottom-fixed-card-wrap").removeClass("first-screen")
            }
        });

    }
    function clickEvent() {
        // if (isWeixin) {
        //     if (!showShade) {
        //         showShade = true;
        //         $('#all').css('overflow', 'hidden');
        //         let shadeHtml = `<div class="full-shade">
        //             <div class="line1">1.点击右上角的<span></span></div>
        //             <div class="line2">2.选择在浏览器中打开<span></span></div>
        //             <div class="arrow"></div>
        //         </div>`
        //         $('#all').append(shadeHtml);
        //     }

        // } else {
        //     if (/(iphone|ipod|ipad)/i.test(navigator.userAgent)) {
        //         window.location.href = 'https://itunes.apple.com/cn/app/jie-zou-da-shi/id6480157369?mt=8';
        //     } else {
        //         window.location.href = 'https://static.zhuayoubao.com/apk-online/zyb-70.apk      '
        //     }
        // }
    }
    function sendSmsCode(){
        const $sendCodeBtn = $('#sendCodeBtn');
            // 为按钮添加点击事件监听器
            $sendCodeBtn.on('click', function () {

                // 禁用按钮，防止再次点击
                $sendCodeBtn.prop('disabled', true);
                var phone=$("#phoneInput").val()
                if(!phone||phone==''){
                    showToast('请输入手机号码')     
                    return;
                }
                const regex = /^1\d{10}$/;
                if(!regex.test(phone)){
                    showToast('请输入正确的手机号码') 
                    return;   
                }
                const params = {
                    // 例如，这里可能是用户手机号等信息
                    phone: $("#phoneInput").val()
                };

                // 构建 GET 请求的查询字符串
                const queryString = $.param(params);
                const apiUrl = host+"/httzyb/api/login/getVerificationCode?" + queryString;
                // 初始化倒计时时间为 60 秒
                $.ajax({
                    url: apiUrl, // 替换为实际的服务端接口地址
                    method: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        // 接口调用成功，开始倒计时
                        showToast('验证码已发送')
                        let countdown = 60;
                        $sendCodeBtn.text(countdown + ' 秒后重新发送');
                        const timer = setInterval(function () {
                            countdown--;
                            if (countdown > 0) {
                                $sendCodeBtn.text(countdown + ' 秒后重新发送');
                            } else {
                                clearInterval(timer);
                                $sendCodeBtn.prop('disabled', false);
                                $sendCodeBtn.text('发送验证码');
                            }
                        }, 1000);
                    },
                    error: function (error) {
                        // 接口调用失败，恢复按钮状态
                        console.error('发送验证码失败:', error);
                        $sendCodeBtn.prop('disabled', false);
                        $sendCodeBtn.text('发送验证码');
                    }
                });
                
            });
    }
    function submit(){
        if(!$("#phoneInput").val()||$("#phoneInput").val()==''){
            showToast('请输入手机号')
            return;
        }
        const regex = /^1\d{10}$/;
        if(!regex.test($("#phoneInput").val())){
            showToast('请输入正确的手机号码') 
            return;   
        }
        if(!$("#smsCode").val()||$("#smsCode").val()==''){
            showToast('请输入验证码')
            return;
        }
        var apiUrl= host+"/httzyb/api/login/phoneLogin?"
        let obj = getUrlParams();
        $.ajax({
                    url: apiUrl, // 替换为实际的服务端接口地址
                    method: 'POST',
                    dataType: 'json',
                    contentType:'application/json',
                    data:JSON.stringify({
                        phone: $("#phoneInput").val(),
                        verificationCode:$("#smsCode").val(),
                        bdVid: obj.bd_vid,
                        channel:obj.id || 5
                    }),
                    success: function (response) {
                        if(response.code!=0){
                            showToast(response.view)
                        }else{
                            showToast('注册成功')     
                            if (isSafariByUserAgent()) {
                                location.href='http://ios.kwygame.com/download'
                            } else {
                                 location.href='http://ios.kwygame.com/ios_browser'
                            }
                        }
                    },
                    error: function (error) {
                        console.error('注册失败:', error);
                    }
                });
    }
    function getUrlParams() {
            let arr = location.search.slice(1).split('&');
            let obj = {};
            arr.map((item) => {
                obj[item.split('=')[0]] = item.split('=')[1]
            })
            return obj
        }
    function showToast(text){
        $.toast({
            text: text, // 提示框的文本内容
            showHideTransition: 'fade', // 显示和隐藏的过渡效果，可选值有 'fade', 'slide', 'plain'
            bgColor: 'transparent', // 提示框的背景颜色
            textColor: '#fff', // 提示框的文本颜色
            allowToastClose: false, // 是否允许关闭提示框
            hideAfter: 2000, // 提示框自动隐藏的时间（毫秒）
            stack: 1, // 提示框的堆叠数量
            textAlign: 'center', // 文本的对齐方式，可选值有 'left', 'right', 'center'
            position: 'top-center' // 提示框的位置，可选值有 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'
        });
    }
    
</script>